<template>
  <div id="browse-div" class="full">
    <el-container class="full">
      <el-aside width="100px" >
        <resource-tab ref="resourceTabRef" before-url="/user/browse/" class="full"></resource-tab>
      </el-aside>
      <el-main >
        <div style="overflow:auto" class="full" @scroll="handleScroll">
          <path-alive-router-view exclude="TrafficDetail,SnapshotDetail,ResourceDetail"
                                  @exposeRef="setBottomAction"></path-alive-router-view>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<script setup>
import ResourceTab from "~/components/ResourceTab.vue";
import PathAliveRouterView from "~/components/PathAliveRouterView.vue";

let bottomAction = null;
const setBottomAction = (pRef) => {
  bottomAction = pRef?.bottomAction
}
const handleScroll = ({ srcElement }) => {
  const scrollTop = srcElement.scrollTop  // 页面滚动的高度
  const clientHeight = srcElement.clientHeight; // 可视区域高度
  const scrollHeight = srcElement.scrollHeight  // 可滚动内容的高度
  const bottomOfWindow = scrollTop + clientHeight >= scrollHeight - 10; // 是否触底
  if (bottomOfWindow && bottomAction != undefined) {
    bottomAction()
  }
}
</script>
<style scoped>
#browse-div {
  overflow-y: auto;
}
</style>
